<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        *{
            padding: 0px;
            margin: 0px;
        }
        
        @keyframes change-color {
            0%{
                background-color: red;
            }
            25%{
                background-color: #0f0;
            }
            50%{
                background-color: blue;
            }
            75%{
                background-color: black;
            }
            100% {
                background-color: #fff;
            }
        }


        div {
            width: 100px;
            height: 100px;
            background-color: red;
            animation: change-color 4s;


            animation-timing-function: steps(1, end);
            /* 
                逐帧动画，区别于过度动画，只能取值一种形式
                使用了step形式的，就不能再使用cubic-bezier
            
                单词值：
                step-start：相当于steps(1, start)
                step-end：相当于steps(1, end)


                函数形式的值：
                steps(num, start | end);
                第二个参数默认值是end
                num: 数字，指的是步数，整数

                怎么理解时间呢？
                从一个状态（一个关键帧）到另一个状态，仍然根据关键帧们定义的百分比线性分割时间
                只不过不是平稳过渡过去的，是根据设置的步数跳过去的
                跳的过程不占时间，理解成在某个时刻跳
                时间会分配在跳过去之后停留，直到下次跳跃
                每个停留时间都是一样的，没有先快还是后快
                每次跳跃的距离或者颜色变化的程度也都是一样的
                所以逐帧动画永远是线性的，不可能实现过渡动画linear之外的效果
                过渡动画底层也是帧的形式实现的，不过肯定不是step
                当步数设置的太多，人眼就分辨不出来，连续动画就是这个原理，除了现实世界，计算机都是利用帧的形式实现的动画


                A状态 跳4步到 B状态，合起来是5个状态
                start: 时间分布在后四个状态，也就是一开始直接跳
                end: 时间分布在前四个状态，等待一定时间跳，但是跳到最后没有时间停留

                一般都用end，因为可以结合 forwards
                而用start，是不好弥补的，除非设置了延迟时间
            
            
            */
        }



    </style>
</head>
<body>
    <div></div>
</body>
</html>